<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>

    <link rel="stylesheet" href="./css/top-bar.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/choose.css">
    <link rel="stylesheet" href="./css/advertising.css">
    <link rel="stylesheet" href="./css/seckill.css">
    <link rel="stylesheet" href="./css/commodity.css">
    <link rel="stylesheet" href="./css/afterbody.css">
    <link rel="icon" href="./images/logo-footer.png">
</head>
<body>
    <!--顶部导航-->
    <div class="bar-right">
        <ul>
            <li>
                <a href="#">
                    <div class="bar-link">
                    <img src="./images/小图标/手机app.png" alt="" class="bar-image">
                        <a href="#" class="bar-text">手机APP</a>
                    </div>
                </a>

            </li>
             <li>
                <a href="#">
                    <div class="bar-link">
                    <img src="./images/小图标/个人中心.png" alt="" class="bar-image">
                    <a href="#" class="bar-text">个人中心</a>
                    </div>
                </a>

            </li>
             <li>
                <a href="#">
                    <div class="bar-link">
                    <img src="./images/小图标/联系客服.png" alt="" class="bar-image">
                    <a href="#" class="bar-text">联系客服</a>
                    </div>
                </a>

            </li>
             <li>
                <a href="#">
                    <div class="bar-link">
                    <img src="./images/小图标/购物车.png" alt="" class="bar-image">
                    <a href="#" class="bar-text">购物车</a>
                    </div>
                </a>

            </li>
            <li>
                <div class="little-box-none"></div>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                    <img src="./images/小图标/回顶部.png" alt="" class="bar-image">
                    <a href="#" class="bar-text">回顶部</a>
                    </div>
                </a>
            </li>
        </ul>


    </div>
    <div class="top">
        <div class="centre">
            <div class="top-nav">
                <div class="top-navigation">
                    <a href="#">小米商城</a>
                    <span class="spn">|</span>
                    <a href="#">MIUI</a>
                    <span class="spn">|</span>
                    <a href="#">loT</a>
                    <span class="spn">|</span>
                    <a href="#">云服务</a>
                    <span class="spn">|</span>
                    <a href="#">天星科技</a>
                    <span class="spn">|</span>
                    <a href="#">有品</a>
                    <span class="spn">|</span>
                    <a href="#">小爱开放平台</a>
                    <span class="spn">|</span>
                    <a href="#">企政团购</a>
                    <span class="spn">|</span>
                    <a href="#">资质证照</a>
                    <span class="spn">|</span>
                    <a href="#">协议规则</a>
                    <span class="spn">|</span>
                    <a href="#">下载app</a>
                    <span class="spn">|</span>
                    <a href="#">智能生活</a>
                    <span class="spn">|</span>
                    <a href="#">Select Region</a>

                </div>
                 <div class="top-shop">
                    <a href="#">购物车</a>
                </div>
                <div class="laned">
                    <a href="#">登陆</a>
                    <span class="spn">|</span>
                    <a href="#">注册</a>
                    <span class="spn">|</span>
                    <a href="#">消息通知</a>


                </div>



            </div>

        </div>
    </div>
    <div class="centre">
        <div class="logo"><img src="./images/logo-footer.png" alt=""></div>
        <div class="nav">
            <ul>
                <li class="blank-li"></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">空调</a></li>
                <li><a href="#">新品</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
                <li></li>
            </ul>
        </div>
        <div class="search">

            <form action="#" method="get">
                <label for="search"> </label>
                <input type="search" class="search-box" id="search" name="search" value="">
                <a href="#" class="search-link">小米10</a>
                <a href="#" class="search-link"></a>
                <input type="submit" class="search-submit" value="搜索">
            </form>
        </div>

    </div>
    <div class="centre">
        <a href="#">
             <img src="./images/float1.jpg"  class="commodity-img" alt="">
        </a>

        <div class="choose">
            <ul>
                <li><a href="#">手机 电话卡 <span class="choose-spn">></span></a></li>
                <li><a href="#">电视 盒子<span class="choose-spn">></span></a></li>
                <li><a href="#">笔记本 平板<span class="choose-spn">></span></a></li>
                <li><a href="#">家电 插线板<span class="choose-spn">></span></a></li>
                <li><a href="#">出行 穿戴<span class="choose-spn">></span></a></li>
                <li><a href="#">智能 路由器<span class="choose-spn">></span></a></li>
                <li><a href="#">电源 配件<span class="choose-spn">></span></a></li>
                <li><a href="#">健康 儿童<span class="choose-spn">></span></a></li>
                <li><a href="#">耳机 音响<span class="choose-spn">></span></a></li>
                <li><a href="#">生活 箱包<span class="choose-spn">></span></a></li>
            </ul>
        </div>
    </div>
    <div class="centre">
        <div class="rest">
            <ul>
                <li><a href="#" class="rest-link">选购手机</a></li>
                <li><a href="#" class="rest-link">企业团购</a></li>
                <li><a href="#" class="rest-link">F码通道</a></li>
                <li><a href="#" class="rest-link">米粉卡</a></li>
                <li><a href="#" class="rest-link">以旧换新</a></li>
                <li><a href="#" class="rest-link">话费充值</a></li>
            </ul>
        </div>
        <div class="advertising">
            <ul>
                <li><a href="#"><img src="./images/1.jpg" class="img1" alt=""></a></li>
                <li><a href="#"><img src="./images/2.jpg" class="img1" alt=""></a></li>
                <li><a href="#"><img src="./images/3.jpg" class="img1" alt=""></a></li>
            </ul>
        </div>
    </div>
    <h2 class="title">小米闪购</h2>
    <div class="centre">
        <div class="seckill-box">
            <div class="time-title">
            <ul>
                <li>
                    <div class="time">10：00场</div>
                    <img src="./images/flashpurchase.png" alt="">
                    <div class="over-time">距离结束还有</div>
                    <div class="countdown">
                        <div class="timebox">01</div>
                        <div class="box-interval">:</div>
                        <div class="timebox">01</div>
                        <div class="box-interval">:</div>
                        <div class="timebox">29</div>

                    </div>
                </li>
            </ul>
        </div>
            <div class="seckill">
                <ul>
                    <li>
                        <a href="#">
                            <div class="seckill-1">
                            <img src="./images/4.jpg" alt="" class="seckill-img">
                            <h3 class="share-h3">小米休闲运动双肩包  蓝色</h3>
                            <p class="p-3">让你的出行更轻松</p>
                            <p class="p-4">139 <span class="original-price">149元</span></p>

                            </div>
                        </a>

                    </li>
                    <li><a href="#">
                            <div class="seckill-1">
                            <img src="./images/5.jpg" alt="" class="seckill-img">
                            <h3 class="share-h3">RedmiBook2 13 i5 8G 512G 独显</h3>
                            <p class="p-3">让高性能全面展示</p>
                            <p class="p-4">3999元 <span class="original-price">4799元</span></p>

                            </div>
                        </a></li>
                    <li><a href="#">
                            <div class="seckill-1">
                          <!--  <p class="flag">5折秒杀</p> -->
                            <img src="./images/6.jpg" alt="" class="seckill-img">
                            <h3 class="share-h3">脊安适 颈部按摩器 护颈仪G2</h3>
                            <p class="p-3">恒温热敷 米家APP操纵 3大按摩手法</p>
                            <p class="p-4">279元 <span class="original-price">399元</span></p>

                            </div>
                        </a></li>
                    <li><a href="#">
                            <div class="seckill-1">
                            <img src="./images/7.jpg" alt="" class="seckill-img">
                            <h3 class="share-h3">摩摩哒摩云AI全身按摩椅</h3>
                            <p class="p-3">AI智能控制，全身气囊包裹，按摩个性定...</p>
                            <p class="p-4">6099元 <span class="original-price">7599元</span></p>

                            </div>
                        </a></li>

                </ul>
            </div>
        </div>


    </div>
    <div class="centre">
        <a href="#"><img  src="./images/广告.jpg" alt="" class="advertising-img extra-config" ></a>
    </div>
    <div class="page-main">
        <h2 class="title">手机</h2>
        <div class="centre">
            <div class="left-advertising">
                <img src="./images/11.jpg" alt="" class="left-advertising">
            </div>

            <div class="main-box">
                <ul>
                    <li class="little-box">
                        
                        <a href="#">
                            <div>
                                <img src="./images/12.jpg" alt="" class="phone-image">
                                <p class="share-h3">Note 9 Pro</p>
                                <p class="p-3">一亿像素夜景相机，120H六档变速...</p>
                                <p class="price">1599元起</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        
                        <a href="#">
                            <div>
                                <img src="./images/13.jpg" alt="" class="phone-image">
                                <p class="share-h3">Note 9</p>
                                <p class="p-3">天玑800U处理器，5000mAh电池...</p>
                                <p class="price">1299元起</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/14.jpg" alt="" class="phone-image">
                                <p class="share-h3">Note 9 4G</p>
                                <p class="p-3">6000mAh长续航</p>
                                <p class="price">999元起 </p>
                            </div>
                        </a></li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/15.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米10 至尊版</p>
                                <p class="p-3">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="price">5299元起 </p>
                            </div>
                        </a></li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/16.jpg" alt="" class="phone-image">
                                <p class="share-h3">Redmi K30S 至尊纪念版</p>
                                <p class="p-3">144Hz[7档]变速高刷屏</p>
                                <p class="price">2599元起 </p>
                            </div>
                        </a></li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/17.jpg" alt="" class="phone-image">
                                <p class="share-h3">Redmi K30 </p>
                                <p class="p-3">120Hz弹出全面屏，天玑1000+旗舰处..</p>
                                <p class="price">1999元起 </p>
                            </div>
                        </a></li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/18.jpg" alt="" class="phone-image">
                                <p class="share-h3">腾讯黑鲨3S</p>
                                <p class="p-3">晓龙865处理器，120Hz刷新率</p>
                                <p class="price">3999元 </p>
                            </div>
                        </a></li>
                    <li class="little-box">
                        <a href="#">
                            <div>
                                <img src="./images/190.jpg" alt="" class="phone-image">
                                <p class="share-h3">Redmi 9A</p>
                                <p class="p-3">5000mAh长循环大电量，6.53超大护...</p>
                                <p class="price">599元起 </p>
                            </div>
                        </a></li>

                </ul>
            </div>
        </div>
        <div class="centre">
        <a href="#"><img  src="./images/广告1.jpg" alt="" class="advertising-img" ></a>
        </div>
        <h2 class="title">家电</h2>
        <div class="centre">
            <div class="left-advertising">
                <img src="./images/31.jpg" alt="" class="home-appliances">
                <img src="./images/390.jpg" alt="" class="home-appliances">
            </div>
            <div class="main-box">
                <ul>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/32.jpg" alt="" class="phone-image">
                                <p class="share-h3">Redmi 红米电视 70英寸</p>
                                <p class="p-3">70英寸震撼巨屏，4K画质，细腻如真</p>
                                <p class="price">3299元 <span class="original-price">3799元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/33.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米全面屏电视E32C</p>
                                <p class="p-3">全面屏设计，人工智能系统</p>
                                <p class="price">899元 <span class="original-price">999元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new">新品</div>
                        <a href="#">
                            <div>
                                <img src="./images/34.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米全面屏电视E55A</p>
                                <p class="p-3">全面屏设计，人工智能语音</p>
                                <p class="price">2199元 <span class="original-price">2299元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/35.jpg" alt="" class="phone-image">
                                <p class="share-h3">米家空调</p>
                                <p class="p-3">出众静音，轻松制冷热</p>
                                <p class="price">1499元 <span class="original-price">1799元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/36.jpg" alt="" class="phone-image">
                                <p class="share-h3">米家互联网洗烘一体机 Pro 10kg</p>
                                <p class="p-3">智能洗烘，省心省力</p>
                                <p class="price">2899元 <span class="original-price">3299元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/37.jpg" alt="" class="phone-image">
                                <p class="share-h3">Redmi全自动波轮洗衣机1A 8kg</p>
                                <p class="p-3">一键操作，父母都爱用</p>
                                <p class="price">799元 <span class="original-price">899元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/38.jpg" alt="" class="phone-image">
                                <p class="share-h3">Air 13.3 2019款</p>
                                <p class="p-3">新一代独立显卡</p>
                                <p class="price">3999元起</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <a href="#">
                            <div class="water">
                            <img src="./images/39.jpg" alt="" class="water-image">
                            <p class="share-h3 " style="margin-top: 5px;margin-left: 30px">米家互联网烟灶套餐(天然气)</p>
                            <p class="p-3"></p>
                            <p class="price" style="margin-top: 5px">2298元</p>
                            </div>
                        </a>

                        <div class="little-box-none"></div>
                        <a href="#">
                            <div class="water">
                            <h1 class="share-h3" style="font-size: 20px;padding-right: 70px">浏览更多</h1>
                            <p class="p-3 character" style="padding-right: 70px">热门</p>
                            <img src="./images/前往.png" alt="" class="water-image2">

                        </div>
                        </a>

                    </li>

                </ul>
            </div>
        </div>

    </div>
    <div class="afterbody">
        <div class="centre service">
            <ul>
                <li style="border-right: 1px solid #e0e0e0;"><a href="#">预约维修服务</a></li>
                <li style="border-right: 1px solid #e0e0e0;"><a href="#">七天无理由退货</a></li>
                <li style="border-right: 1px solid #e0e0e0;"><a href="#">15天免费换货</a></li>
                <li style="border-right: 1px solid #e0e0e0;"><a href="#">满150元包邮</a></li>
                <li><a href="#">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="centre service-link">
            <ul>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">帮助中心</h1>
                        <a href="#" class="service-a">账户管理</a>
                        <a href="#" class="service-a">购物指南</a>
                        <a href="#" class="service-a">订单操作</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">服务支持</h1>
                        <a href="#" class="service-a">售后政策</a>
                        <a href="#" class="service-a">自助服务</a>
                        <a href="#" class="service-a">相关下载</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">线下门店</h1>
                        <a href="#" class="service-a">小米之家</a>
                        <a href="#" class="service-a">服务网店</a>
                        <a href="#" class="service-a">授权体验店</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关于小米</h1>
                        <a href="#" class="service-a">了解小米</a>
                        <a href="#" class="service-a">加入小米</a>
                        <a href="#" class="service-a">投资者关系</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关注我们</h1>
                        <a href="#" class="service-a">新浪微博</a>
                        <a href="#" class="service-a">官方微信</a>
                        <a href="#" class="service-a">联系我们</a>
                    </div>
                </li>
                <li>
                    <div style="border-right: 1px solid #e0e0e0">
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">特色服务</h1>
                        <a href="#" class="service-a">F 码通道</a>
                        <a href="#" class="service-a">礼物码</a>
                        <a href="#" class="service-a">防伪查询</a>
                    </div>
                </li>
            </ul>
            <div class="callme">
                <p style="font-size: 22px;color: red;margin: 0 0 10px;text-align: center">400-100-5678</p>
                <p style="text-align: center;color: #424242;font-size: 12px;margin: 0 0 16px">
                     周一至周日 8:00-18:00
                    <br>

                    （仅收市话费）
                </p>
                <div class="relation">
                    <a href="#">联系客服</a>
                </div>

            </div>
        </div>
        <div class="firm">
            <div class="centre">
                <div><img src="./images/logo-footer.png" alt="" style="margin-right: 12px;float: left"></div>
                <p class="below-1" >
                    <a href="#">小米商城</a>
                    <span class="spn-new">|</span>
                    <a href="#">MIUI</a>
                    <span class="spn-new">|</span>
                    <a href="#">米家</a>
                    <span class="spn-new">|</span>
                    <a href="#">米聊</a>
                    <span class="spn-new">|</span>
                    <a href="#">多看</a>
                    <span class="spn-new">|</span>
                    <a href="#">游戏</a>
                    <span class="spn-new">|</span>
                    <a href="#">米粉卡</a>
                    <span class="spn-new">|</span>
                    <a href="#">政企服务</a>
                    <span class="spn-new">|</span>
                    <a href="#">小米天猫店</a>
                    <span class="spn-new">|</span>
                    <a href="#">隐私政策</a>
                    <span class="spn-new">|</span>
                    <a href="#">问题反馈</a>
                    <span class="spn-new">|</span>
                    <a href="#">廉正举办</a>
                    <span class="spspn-new">|</span>
                    <a href="#">select region</a>
                </p>
                <br>
                <p class="below-2">
                    <a href="#">mi.com</a>
                    <a href="#">京ICP证110507号</a>
                    <a href="#">京ICP备10046444号</a>
                    <a href="#">京公网安备11010802020134号</a>
                    <a href="#">京网文[2017]1530-131号 </a>
                    <br>
                    <a href="#">（京）网械平台备字（2018）第00005号</a>
                    <a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                    <a href="#">营业执照</a>
                    <a href="#">医疗器械公告</a>
                    <br>
                    <a href="#">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
                </p>
                <div class="make-img">
                    <img src="./images/truste.png" alt="">
                    <img src="./images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="./images/v-logo-1.png" alt="">
                    <img src="./images/v-logo-2.png" alt="">
                    <img src="./images/v-logo-3.png" alt="">

                </div>

            </div>
            <div class="xiaomi">探索黑科技，小米为发烧而生</div>
        </div>

    </div>



</body>
</html>